/* height */
@mixin getHeightClass($value, $unit: 'rpx', $extra: null) {
  @if ($unit == '%') {
    .h#{$value}#{$extra} {
      height: #{$value}#{$unit};
    }
  } @else {
    .h#{$value}#{$extra} {
      height: #{$value * 2}#{$unit};
    }
  }

  @if $unit == 'rpx' {
    @include getLineHeightClass($value, 'rpx')
  }
}

/* line-height */
@mixin getLineHeightClass($value, $unit) {
  @if $unit {
    .lh#{$value} {
      line-height: #{$value * 2}#{$unit};
    }
  } @else {
    $first: nth($value, 1);
    $second: nth($value, 2);
    $point: '.';

    .lh#{$first}p#{$second} {
      line-height: #{$first}#{$point}#{$second};
    }
  }
}

/* width */
@mixin getWidthClass($value, $unit: 'rpx', $extra: null) {
  @if ($unit == '%') {
    .w#{$value}#{$extra} {
      width: #{$value}#{$unit}
    }
  } @else {
    .w#{$value}#{$extra} {
      width: #{$value * 2}#{$unit}
    }
  }

}

/*margin*/
@mixin getMargin($value) {  //  得到 全部margin组合
  .mt#{$value} { margin-top: #{$value * 2}rpx; }
  .mb#{$value} { margin-bottom: #{$value * 2}rpx; }
  .ml#{$value} { margin-left: #{$value * 2}rpx; }
  .mr#{$value} { margin-right: #{$value * 2}rpx; }
  .mtb#{$value} {
    @extend .mt#{$value};
    @extend .mb#{$value};
  }
  .mlr#{$value} {
    @extend .ml#{$value};
    @extend .mr#{$value};
  }
  .margin#{$value} {
    @extend .mlr#{$value};
    @extend .mtb#{$value};
  }
}

/*padding*/
@mixin getPadding($value) {  //  得到 全部padding组合
  .pt#{$value} { padding-top: #{$value * 2}rpx; }
  .pb#{$value} { padding-bottom: #{$value * 2}rpx; }
  .pl#{$value} { padding-left: #{$value * 2}rpx; }
  .pr#{$value} { padding-right: #{$value * 2}rpx; }
  .ptb#{$value} {
    @extend .pt#{$value};
    @extend .pb#{$value};
  }
  .plr#{$value} {
    @extend .pl#{$value};
    @extend .pr#{$value};
  }
  .padding#{$value} {
    @extend .plr#{$value};
    @extend .ptb#{$value};
  }
}

/* border-radius */
@mixin getBorderRadius ($value, $unit: 'rpx', $extra: null) {
  @if ($unit == '%') {
    .br#{$value}#{$extra} {
      border-radius: #{$value}#{$unit};
    }
  } @else {
    .br#{$value}#{$extra} {
      border-radius: #{$value * 2}#{$unit};
    }
  }

  @if ($unit != '%') {
    .brt#{$value}#{$extra} {
      border-radius: #{$value * 2}#{$unit} #{$value * 2}#{$unit} 0 0;
    }
    .brb#{$value}#{$extra} {
      border-radius: 0 0 #{$value * 2}#{$unit} #{$value * 2}#{$unit};
    }
  }
}

/* 多行超出省略号 */
@mixin getLineClamp ($count) {
  .line-clamp#{$count} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: #{$count};
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
}


@mixin arrow() {
  width: 20rpx;
  height: 20rpx;
  vertical-align: middle;
  transform: rotateZ(45deg);
}


/* 边框 */
@mixin setLineBase($c: null) {
  content: " ";
  position: absolute;
  color: #{$c};
  border-radius: inherit;
  pointer-events: none;
}
@mixin setLine($c: null) {
  @include setLineBase($c);
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 200%;
  height: 200%;
  border: 1px solid #{$c};
  transform-origin: 0 0;
  transform: scale(0.5);
  box-sizing: border-box;
}
@mixin setTopLine($c: null) {
  @include setLineBase($c);
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #{$c};
  transform-origin: 0 0;
  transform: scaleY(0.5);
}
@mixin setBottomLine($c: null) {
  @include setLineBase($c);
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #{$c};
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}
@mixin setLeftLine($c: null) {
  @include setLineBase($c);
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #{$c};
  transform-origin: 0 0;
  transform: scaleX(0.5);
}
@mixin setRightLine($c: null) {
  @include setLineBase($c);
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #{$c};
  transform-origin: 100% 0;
  transform: scaleX(0.5);
}
@mixin getBorder($c: null) {
  position: relative;
  border-radius: inherit;
  &:before {
    @include setLine($c);
  }
}
@mixin getBorderTop($c: null) {
  position: relative;
  border-radius: inherit;
  &:before {
    @include setTopLine($c);
  }
}
@mixin getBorderBottom($c: null) {
  position: relative;
  &:after {
    @include setBottomLine($c);
  }
}
@mixin getBorderLeft($c: null) {
  position: relative;
  border-radius: inherit;
  &:before {
    @include setLeftLine($c);
  }
}
@mixin getBorderRight($c: null) {
  position: relative;
  border-radius: inherit;
  &:after {
    @include setRightLine($c);
  }
}
